import { View } from '@tarojs/components';
import './HeroIndex.scss';
import { IindexMode } from '../../../interface';
import { heroTypes } from '../../../Config';

interface IHeroIndex {
  indexes?: string[];
  current: string;
  onChange: (key: string) => void;
  mode: IindexMode;
  onModeChange: () => void;
}
function HeroIndex(props: IHeroIndex) {
  const { indexes, current, onChange, mode, onModeChange } = props;
  return (
    <View className="HeroIndex">
      <View className="HeroIndex-Mode" onClick={onModeChange}>
        {mode}
      </View>
      {indexes &&
        indexes.map((index) => (
          <View
            className={`HeroIndex-Index ${current === index ? 'selected' : ''}`}
            key={index}
            onClick={onChange.bind(this, index)}
          >
            {mode === '职业' ? heroTypes[Number(index) - 1] : index}
          </View>
        ))}
    </View>
  );
}
export default HeroIndex;
